<template>
  <div class='box'>
    <!-- 编辑详细信息 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="身份证账号：" prop="idNumber">
          <el-input clearable v-model="form.idNumber" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="民族：" prop="ethnicity">
          <el-select v-model="form.ethnicity" placeholder="请选择民族" v-if="showMz">
            <el-option v-for="item in ethnicityOptions" :key="item?.code" :label="item?.name" :value="item?.code" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="血型：" prop="bloodType">
          <el-select v-model="form.bloodType" placeholder="请选择血型" v-if="showBloodType">
            <el-option v-for="item in bloodTypeOptions" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="学历：" prop="education">
          <el-select v-model="form.education" placeholder="请选择学历" v-if="showeducation">
            <el-option v-for="item in educationOptions" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="职业：" prop="occupation">
          <el-select v-model="form.occupation" placeholder="请选择职业" v-if="showOccupation">
            <el-option v-for="item in occupationDatas" :key="item?.id" :label="item?.name" :value="item?.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="婚姻状况：" prop="maritalStatus">
          <el-radio-group v-model="form.maritalStatus">
            <el-radio-button label="0">未婚</el-radio-button>
            <el-radio-button label="1">已婚</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      
      <el-col :span="8">
        <el-form-item label="电子邮件:" prop="email">
          <el-input clearable v-model="form.email" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="紧急联系人：" prop="emergencyContact">
          <el-input clearable v-model="form.emergencyContact" placeholder="请输入" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="紧急联系人电话：" prop="emergencyContactPhone">
          <el-input clearable v-model="form.emergencyContactPhone" placeholder="请输入" />
        </el-form-item>
      </el-col>
      
      <el-col :span="12">
        <el-form-item label="所在地区：">
          <el-cascader v-model="threeValue" :options="cascadeOptions" @change="handleChange" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="详细地址：" prop="address">
          <el-input clearable v-model="form.address" placeholder="请输入" />
        </el-form-item>
      </el-col>
      
      <el-col :span="24">
        <el-form-item label="备注信息：" prop="notes">
          <el-input clearable v-model="form.notes" placeholder="请输入" />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>
 
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { enumListRequest,nationOptionsRequest } from '@/api/common/index';
import { editDetailRequest } from '@/api/user/index';
import { placeArray } from './place';
const props = defineProps({
  userInfo: {
    type: Object
  }
});
// 表单字段
const form = ref({
  id: null,
  idNumber: null,
  workerCode: null,
  ethnicity: null,
  bloodType: null,
  education: null,
  occupation: null,
  maritalStatus: null,
  email: null,
  provinceId: null,
  cityId: null,
  districtId: null,
  address: null,
  notes: null,
  emergencyContact: null,
  emergencyContactPhone: null
});
form.value = props.userInfo as any //获取详情 赋值
// console.log(props.userInfo, '详情数据-(详细信息编辑)---');
// 方法
// 血型下拉
let bloodTypeOptions = ref([]);
const showBloodType = ref(true)
const getbloodTypeOptions = async () => {
  showBloodType.value = false;
  const data: any = await enumListRequest({ enumName: 'BloodTypeEnum' });
  bloodTypeOptions.value = data.data;
  showBloodType.value = true;
};
// 民族下拉
let ethnicityOptions = ref([]);
const showMz = ref(true)
const getethnicityFun = async () => {
  showMz.value = false;
  const data: any = await nationOptionsRequest({ name: '' });
  ethnicityOptions.value = data.data;
  showMz.value = true;
};
// 学历下拉
let educationOptions = reactive([]);
const showeducation = ref(true)
const geteducationOptions = async () => {
  showeducation.value = false;
  const data: any = await enumListRequest({ enumName: 'EducationEnum' });
  educationOptions = data.data;
  showeducation.value = true;
};

// 职业下拉
let occupationDatas = reactive([]);
const showOccupation = ref(true)
const getoccupationDatas = async () => {
  showOccupation.value = false;
  const data: any = await enumListRequest({ enumName: 'OccupationEnum' });
  occupationDatas = data.data;
  showOccupation.value = true;
};
// 所在区域
const threeValue = ref([]);
let sheng = String(props?.userInfo?.provinceId);
let shi = String(props?.userInfo?.cityId);
let qu = String(props?.userInfo?.districtId);
threeValue.value = [sheng, shi, qu]
let cascadeOptions = placeArray;
const handleChange = (value: any) => {
  form.value.provinceId = value[0]
  form.value.cityId = value[1]
  form.value.districtId = value[2]
}
// 保存
const SubmitForm = async () => {
  const data: any = await editDetailRequest(form.value);
  if (data.code === 2000) {
    ElMessage.success('保存成功')
  } else {
    ElMessage.error(data?.message)
  }
}
getethnicityFun()
getbloodTypeOptions()
geteducationOptions()
getoccupationDatas()
defineExpose({ SubmitForm })
</script>
 
<style lang="scss" scoped>
.box {}
</style>